<template>
	<view class="dmm-container">
		<view class="dmm-space"></view>

		<view class="form u-border-bottom">
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"  name="personFront" :maxCount="1">
				<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="aspectFit" ></image>
			</u-upload>

			<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic"  name="personCard" :maxCount="1">
				<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="aspectFit" ></image>
			</u-upload>
		</view>
		
		<view class="tip">
			<text class="title">拍摄须知</text>
			
			<text class="text text-content">1.拍摄时请正对相机，保持光线良好，确保照片清晰；</text>
			<text class="text text-content"> 2.手持身份证照片拍摄时，请注意对焦于身份证上，以确保身份证上信息可以准确识别； </text>
			<text class="text text-content">3.切记不可翻拍和镜像拍摄。</text>
		</view>
		
		<u-button type="primary" :disabled="!couldNext" text="下一步" @click="next"></u-button>

		<compress ref="compress"></compress>
	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/common/utils.js'
	import compress from "@/components/helang-compress/helang-compress"
	import {mapState, mapMutations, mapActions} from 'vuex'

	export default {
		components: {
			compress
		},
		data() {
			return {
			};
		},
		computed: {
			...mapState('auth', {
				fileList1: (state) => state.files.personFront ? [state.files.personFront] : [],
				fileList2: state => state.files.personCard ? [state.files.personCard] : []
			}),
			couldNext: function() {
				return this.fileList1[0] && this.fileList2[0]
			},
			
		},
		methods: {
			...mapActions('auth', ['filesChange']),
			deletePic(event) {
				this.filesChange({name: event.name, file: null})
				// console.log(this[`fileList${event.index + 1}`])
				// this[`fileList${event.index + 1}`].pop()
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let file = event.file
				const {name} = event

				// #ifndef H5
				await this.$refs.compress.compress({
					src: file.url,
				}).then(fileUrl => {
					file.url = fileUrl
				})
				// #endif

				this.filesChange({name, file})

			},
			
			next() {
				uni.navigateTo({
					url: '/pages/auth/auth1'
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
	.dmm-container {
		margin-top: 20rpx;
		padding: 0rpx 30rpx;
		background-color: #fff;
		.form {
			display: flex;
			padding: 40rpx 0;
			justify-content: space-between;
			margin-bottom: 40rpx;
			.u-upload {
				width: 335rpx;
				
				/deep/ .u-upload__wrap__preview {
					margin: 0;
				}
				/deep/ image {
					border-radius: $uni-border-radius-lg;
					width: 335rpx !important;
					height: 208rpx !important;
				}
			}
		}
		
		.tip {
			margin-bottom: 60rpx;
			text {
				display: block;
				margin-bottom: 15rpx;
			}
			.title {
				font-size: $uni-font-size-base;
				
			}
		}
	}
</style>
